<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			input[type="range"] {
			    display: block;
			    -webkit-appearance: none;
			    background-color: #bdc3c7;
			    width: 100%;
			    height: 2px;
			    border-radius: 2px;
			    margin: 0 auto;
			    outline: 0;
			}
			input[type="range"]:before{
			    content: '';
			    width: 10px;
			    height: 3px;
			    background-color: blue;
			}
			
			input[type="range"]::-webkit-slider-thumb {
			    position: relative;
			    -webkit-appearance: none;
			    background-color: orangered;
			    width: 20px;
			    height: 20px;
			   /* border-radius: 50%; */
			    border: 2px solid white;
			    cursor: pointer;
			    transition: 0.3s ease-in-out;
			    -webkit-box-shadow: 0 1px 1px black inset;
			}
		</style>
	</head>
	<body>
		<input type="range" min="0" max="100" step="1" value="0">
	</body>
</html>
<script>
	 var elem = document.querySelector('input[type="range"]');
            var rangeValue = function(){
                var newValue = elem.value;
                var target = document.querySelector('.value');
                target.innerHTML = newValue;
            };
            elem.addEventListener("input", rangeValue);

</script>
